<template>
  <div id="app">
    <div class="table-list">
      <my-table ref="table" :table="table">
        <template v-slot:shopInfo="scope">
          <div>{{scope.row.shop_name}}</div>
          <div class="text-grey fs-xs">
            <span>账号：</span>
            <span>{{scope.row.account}}</span>
          </div>
          <div class="text-grey fs-xs">
            <span>密码：</span>
            <span>******</span>
            <el-button class="ml-1" type="text" size="mini" icon="el-icon-edit" @click="editPassword(scope.row)"></el-button>
          </div>
        </template>
        <template v-slot:agentInfo="scope">
          <div>
            <span>机器名称：</span>
            <span>本机</span>
          </div>
          <div class="text-grey fs-xs mt-2">
            <span>IP地址：</span>
            <span>{{scope.row.ip}}</span>
          </div>
          <div class="text-grey fs-xs">
            <span>代理状态：</span>
            <span v-if="scope.row.agent_status === 1" class="text-blue-3">正常</span>
            <span v-if="scope.row.agent_status === 2" class="text-danger">连接失败</span>
            <span v-if="scope.row.agent_status === 0">无</span>
            <el-button class="ml-1" type="text" size="mini" icon="el-icon-edit" @click="editAgent(scope.row)"></el-button>
          </div>
        </template>
        <template v-slot:config="scope">
          <div>
            <span>店铺配置：</span>
            <span v-if="scope.row.shop_config_status === 1" class="text-blue-3">已配置</span>
            <span v-else class="text-danger">未配置</span>
            <el-button class="ml-1" type="text" size="mini" icon="el-icon-edit" @click="editShopConfig(scope.row)"></el-button>
          </div>
          <div>
            <span>平台配置：</span>
            <span v-if="scope.row.plat_config_status === 1" class="text-blue-3">已配置</span>
            <span v-else class="text-danger">未配置</span>
            <el-button class="ml-1" type="text" size="mini" icon="el-icon-edit" @click="editPlatConfig(scope.row)"></el-button>
          </div>
        </template>
      </my-table>
    </div>
    
  </div>
</template>

<script>
  export default {
    name: 'app',
    components: {
      MyTable: () => import('./components/MyTable'),
    },
    data() {
      let self = this
      return {
        table: {
          // 多选框
          index_label:'| | |',
          // selection: true,
          // 是否显示边框
          border: true,
          // 是否显示斑马线
          stripe: true,
          height: 500,
          index: true,
          // 表头
          thead: [
            {
              label: '店铺信息',
              columnType: 'slot',
              slotName: 'shopInfo',
              align: 'center',
              width: 200
            },
            {
              label: '经营大类',
              columnType: 'function',
              align: 'center',
              width: 100,
              fixed: 'right',
              callback: (row) => {
                return row.categories.join()
              }
            },
            {
              label: '代理信息',
              columnType: 'slot',
              slotName: 'agentInfo',
              align: 'center',
              width: 200
            },
            {
              label: '配置',
              columnType: 'slot',
              slotName: 'config',
              align: 'center',
              width: 200
            },
            {
              label: '绑定时间',
              columnType: 'function',
              align: 'center',
              width: 200,
              sortable: true,
              prop: 'bind_time',
              callback: (row) => {
                const {bind_time,login_time} = row
                const content = `
                    <div class="mb-2">${bind_time}</div>
                    <div class="text-grey fs-xs">最近时间</div>
                    <div class="text-grey fs-xs">${login_time}</div>
                  `
                return content
              }
            }
          ],
          // 表格数据
          tableData: [
            {
              shop_name: '店铺名称',
              title: '这是标题',
              account: 'lan100',
              password: '132456',
              categories: ['鞋子','衣服'],
              ip: '127.0.0.1',
              agent_status: 0,
              shop_config_status: 1,
              plat_config_status: 0
            }
          ],
          // 分页
          pagination: {
            total: 0,
            handleSizeChange: (val) => {
              this.pageSize = val
              this.getTableData()
            },
            handleCurrentChange: (val) => {
              this.currentPage = val
              this.getTableData()
            }
          },
          // 排序改变
          sortChange: (sort,order) => {
            console.log(sort,order)
          }
        },
        currentPage: 1,
        pageSize: 10
      }
    },
    created() {
      this.getTableData()
    },
    methods: {
      // 获取店铺信息
      getTableData() {
        const params  = {
          pagenum: this.currentPage,
          pagesize: this.pageSize
        }
        this.$http.post('/api/store/list',params).then(({data: res}) => {
          this.table.tableData = res.list
          this.table.pagination.total = res.total
        })
      },
      editPassword(row) {
        this.$message.success('修改密码')
      },
      editAgent(row) {
        this.$message.success('修改代理')
      },
      editShopConfig(row) {
        this.$message.success('修改店铺配置')
      },
      editPlatConfig(row) {
        this.$message.success('修改平台配置')
        console.log(this.$refs.table.getTableSelections());
      },
      handleSizeChange() {}
    }
  }
</script>

<style lang="scss" scoped>
  #app {
    overflow: scroll;
    
  }
</style>
